<template>
  <div class="container">
    <div id="stencil"></div>
    <div id="graph-container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { Graph } from '@antv/x6'
import { useGraph } from '../composables/useGraph'
import { useGraphEvents } from '../composables/useGraphEvents'
import '../styles/graph.css'

let graph: Graph

const { initGraph, registerNodes, initStencil } = useGraph()

onMounted(() => {
  registerNodes()
  graph = initGraph()
  initStencil(graph)
  
  const { bindKeyboardShortcuts, bindNodeEvents } = useGraphEvents(graph)
  bindKeyboardShortcuts()
  bindNodeEvents()
})

onUnmounted(() => {
  if (graph) {
    graph.dispose()
  }
})
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

#stencil {
  width: 200px;
  height: 100%;
  position: relative;
  background-color: #fff;
  border-right: 1px solid #e8e8e8;
  overflow: auto;
}

#graph-container {
  flex: 1;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
</style> 